<template>
  <div>
    <el-drawer v-model="_isOpen" size="1224" :direction="'rtl'" modal-class="change-order-drawer">
      <template #header>
        <h4><i class="icon"></i>{{ optionInfo.title }}</h4>
      </template>
      <template #default>
        <div v-loading="loading">
          <div class="top" v-if="optionInfo.isSpace">
            <div class="total-wrap">
              <div class="left">
                <template v-if="_spaceDetail?.budgetType === 1">
                  <b>
                    合计总造价：<i style="color: #ff3333">¥{{ _spaceDetail?.budgetTotlalMoney || "-" }}</i>
                  </b>
                  <span class="f12" style="color: #86909c">
                    （ 空间：{{ _spaceDetail?.spaceItemNum || "-" }}个 / 报价项：{{ _spaceDetail?.budgetItemNum || "-" }}项）
                  </span>
                  <span class="f12 ml20" style="color: #4e5969; display: inline-block">
                    正价商品：{{ _spaceDetail?.regularDiscount }}% / 特价商品：{{ _spaceDetail?.specialDiscount }}%
                  </span>
                </template>
                <template v-else>
                  <b>套餐合计：<i style="color: #ff3333">¥13580.00</i></b>
                  <span class="f12" style="color: #86909c"
                  >（套餐价：¥{{ _spaceDetail?.packageUnitPrice }}/㎡ 可享受：¥{{ _spaceDetail?.packageSquareNum }}/㎡
                    当前平方：{{ _spaceDetail?.houseArea }}㎡ 每多出1平方：¥{{
                      _spaceDetail?.packageOverUnitPrice
                    }}
                    /㎡计算）</span
                  >
                  <p class="f12 mt10" style="color: #86909c">
                    超出{{ _spaceDetail?.overSquareNum || "-" }}㎡：¥{{ _spaceDetail?.overSquareNumMoney }} + 个性化增项/配：¥{{
                      _spaceDetail?.customIncreaseMoney
                    }}
                    + 管理费：¥{{ _spaceDetail?.manageFee }} + 税金费：¥{{ _spaceDetail?.taxesFee }}

                    <span class="f12 ml20" style="color: #4e5969; display: inline-block">
                      正价商品：{{ _spaceDetail?.regularDiscount }}% / 特价商品：{{ _spaceDetail?.specialDiscount }}%
                    </span>
                  </p>
                </template>
              </div>
              <div class="right">
                <p>
                  <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="合计总造价 - （材料成本总价+人工费+税金费+管理费+综合项费用总价、都是总价）=订单总销售价-总成本价 除以 / 订单总销售价 （最后等于平均毛利润）"
                      placement="bottom"
                  >
                    <el-button type="primary" link>
                      <el-icon style="color: #909399"><QuestionFilled /></el-icon>
                    </el-button>
                  </el-tooltip>
                  <span
                  >当前订单毛利润：<i style="color: #1a1a1a">{{ _spaceDetail?.grossProfitRate || "-" }}%</i></span
                  >
                </p>
                <p class="ml40">
                  <span>
                    订单毛利润限制：<i style="color: #1a1a1a">{{ _spaceDetail?.limitGrossProfitRate || "-" }}%</i></span
                  >
                </p>
              </div>
            </div>
            <div class="price-wrap">
              <p class="mb6">成交金额：¥{{ _spaceDetail?.concludeMoney || "-" }}</p>
              <span class="f12"> 备注：{{ _spaceDetail?.concludeRemark || "-" }} </span>
            </div>
          </div>

          <!-- 标签页 -->
          <el-tabs v-if="optionInfo.isSpace" v-model="activeName" @tab-change="handleClickTabs">
            <el-tab-pane
                :label="item?.spaceName"
                :name="item.spaceId"
                v-for="(item, index) in _spaceArr"
                :key="index"
            ></el-tab-pane>
          </el-tabs>

          <!-- 空间 -->
          <div v-if="optionInfo.isSpace" class="table-item">
            <header class="mb20">
              <p>
                <b class="f18">{{ currSpace.spaceName || "-" }}</b>
                <span class="f14">
                  （合计：<i style="color: #ff3333">¥{{ currSpace.spaceTotalMoney }}</i> ）
                </span>
              </p>
            </header>
            <el-table
                v-if="_productItemList.length > 0"
                :data="_productItemList"
                class="jzt-table"
                border
                style="width: 100%"
                height="400"
            >
              <el-table-column fixed type="index" label="序号" width="40" />
              <el-table-column fixed prop="name" label="图片" width="115">
                <template #default="scope">
                  <img :src="scope.row.mainPicUrl" alt="" />
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="商品名称" width="180" />
              <el-table-column prop="brandName" label="品牌" width="100" />
              <el-table-column prop="modeCode" label="型号" width="100" />
              <el-table-column prop="productUnit" label="单位" width="100">
                <template #default="scope">
                  {{ useCodeArrStore().getDictName("shop_unit", scope.row.productUnit) }}
                </template>
              </el-table-column>
              <el-table-column prop="num" label="数量" width="100" />
              <el-table-column prop="actualUsedNum" label="实际施工用量" width="180" />
              <el-table-column prop="lostRate" label="耗损率" width="100" />
              <el-table-column prop="costUnitPrice" label="成本单价" width="100" />
              <el-table-column prop="productUnitPrice" label="材料单价" width="100" />
              <el-table-column prop="workerUnitPrice" label="人工费单价" width="100" />
              <el-table-column prop="unitTotalMoney" label="单项合计" width="100" />
              <el-table-column prop="projectVal" label="预算工程量" width="140" />
              <el-table-column prop="projectTotalMoney" label="汇总合计" width="100" />
              <el-table-column prop="quotaName" label="工程项目名称" width="260" />
              <el-table-column prop="standardDesc" label="材料及工艺说明" width="140">
                <template #default="{ row }">
                  <p class="text-over8" style="width: 100%" :title="row.standardDesc">
                    {{ row.standardDesc }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="定额备注" width="280" />
              <el-table-column prop="productRemark" label="商品备注" width="280">
                <template #default="scope">
                  <RemarkEditor v-model="scope.row.productRemark" :title="'修改备注'" :isEdit="false" />
                </template>
              </el-table-column>
            </el-table>
            <el-empty v-else description="这里暂时什么都没有" />
          </div>

          <!-- 退货单 -->
          <div class="table-item">
            <header class="mb20">
              <p>
                <b class="f18">退货单</b>
                <span class="f14">
                  （费用合计：<i style="color: #ff3333"
                >¥{{ _returnOrderObj.refundBudgetTotlalMoney }}-{{ _returnOrderObj.refundBudgetTotlalCNMoney }}</i
                >，管理费：¥{{ _returnOrderObj.refundManagerFee || "-" }}+其他费用：¥{{
                    _returnOrderObj.refundOtherFee || "-"
                  }}，综合项金额：¥{{ _returnOrderObj?.refundCustomComprehensiveFee || "-" }}，税金费：¥{{
                    _returnOrderObj?.refundTaxesFee || "-"
                  }}
                  ）
                </span>
              </p>
            </header>
            <el-table
                v-if="_returnOrderObj?.itemList?.length > 0"
                :data="_returnOrderObj?.itemList"
                class="jzt-table"
                border
                style="width: 100%; max-height: 400px; overflow-y: auto"
                :span-method="temp => tableArraySpan(_returnOrderObj?.itemList || [], null, temp)"
            >
              <el-table-column fixed type="index" label="序号" width="40" />
              <el-table-column fixed prop="name" label="图片" width="115" class="img">
                <template #default="scope">
                  <div class="img">
                    <img :src="scope.row.mainPicUrl" alt="" />
                    <img class="icon" v-if="scope.row.barterType === 1" :src="tui" alt="" />
                    <img class="icon" v-if="scope.row.barterType === 2" :src="huan" alt="" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="商品名称" width="180" />
              <el-table-column prop="brandName" label="品牌" width="100" />
              <el-table-column prop="modeCode" label="型号" width="100" />
              <el-table-column prop="productUnit" label="单位" width="100">
                <template #default="scope">
                  {{ useCodeArrStore().getDictName("shop_unit", scope.row.productUnit) }}
                </template>
              </el-table-column>

              <!-- 有空间的时候-来自详情页快照  -->
              <template v-if="optionInfo.isSpace">
                <el-table-column prop="num" label="数量" width="100" />
                <el-table-column prop="actualUsedNum" label="实际退/换/补数量" width="180" />
                <el-table-column prop="lostRate" label="耗损率" width="100" />
                <el-table-column prop="costUnitPrice" label="成本单价" width="100" />
                <el-table-column prop="productUnitPrice" label="材料单价" width="100" />
                <el-table-column prop="workerUnitPrice" label="人工费单价" width="100" />
                <el-table-column prop="unitTotalMoney" label="单项合计" width="100" />
                <el-table-column prop="projectVal" label="预算工程量" width="140" />
                <el-table-column prop="projectTotalMoney" label="汇总合计" width="100" />
                <el-table-column prop="quotaName" label="工程项目名称" width="260" />
                <el-table-column prop="standardDesc" label="材料及工艺说明" width="140">
                  <template #default="{ row }">
                    <p class="text-over8" style="width: 100%" :title="row.standardDesc">
                      {{ row.standardDesc }}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column prop="exchangeAmount" label="变更金额" width="280" />
                <el-table-column prop="exchangeCause" label="变更原因" width="280" />
              </template>

              <!-- 没有空间的时候-来自核量列表页 -->
              <template v-else>
                <el-table-column prop="increaseNum" label="退换数量" width="100" />
                <el-table-column prop="lostRate" label="耗损率" width="100" />
                <el-table-column prop="productUnitPrice" label="材料单价" width="100" />
                <el-table-column prop="workerUnitPrice" label="人工费单价" width="100" />
                <el-table-column prop="unitTotalMoney" label="单项合计" width="100" />
                <el-table-column prop="projectVal" label="预算工程量" width="140" />
                <el-table-column prop="projectTotalMoney" label="汇总合计" width="100" />
                <el-table-column prop="exchangeAmount" label="变更金额" width="280" />
                <el-table-column prop="exchangeCause" label="变更原因" width="280" />
              </template>
            </el-table>
            <el-empty v-else description="这里暂时什么都没有" />
          </div>

          <!-- 换补单 -->
          <div class="table-item">
            <header class="mb20">
              <p>
                <b class="f18">换补单</b
                ><span class="f14">
                  （费用合计：
                  <i style="color: #ff3333">
                    ¥{{ _replaceOrderObj?.budgetTotlalMoney }}-{{ _replaceOrderObj?.budgetTotlalCNMoney }}</i
                  >
                  ，管理费：¥{{ _replaceOrderObj.managerFee || "-" }}+其他费用：¥{{
                  _replaceOrderObj.otherFee || "-"
                }}，综合项金额：¥{{ _replaceOrderObj?.customComprehensiveFee || "-" }} ，税金费：¥{{
                  _replaceOrderObj?.taxesFee || "-"
                }}
                  ）</span
              >
                <span class="f12 ml30" style="color: #4e5969; display: inline-block" v-if="!optionInfo.isSpace">
                  正价商品：{{ _replaceOrderObj.customerRegularDiscount || "-" }}% &nbsp;/&nbsp; 特价商品：
                  {{ _replaceOrderObj.customerSpecialDiscount || "-" }}%
                </span>
              </p>
              <div class="top pt10 pl0 pr0 pb0" v-if="!optionInfo.isSpace">
                <div class="price-wrap mt0">
                  <p class="mb6">成交金额：¥{{ _replaceOrderObj.concludeMoney || "-" }}</p>
                  <span class="f12"> 备注：{{ _replaceOrderObj.remark || "-" }} </span>
                </div>
              </div>
            </header>
            <template v-if="_replaceOrderObj?.itemList?.length > 0">
              <el-table
                  :data="_replaceOrderObj?.itemList"
                  class="jzt-table"
                  border
                  style="width: 100%; max-height: 400px; overflow-y: auto"
                  :span-method="temp => tableArraySpan(_replaceOrderObj?.itemList || [], null, temp)"
              >
                <el-table-column fixed type="index" label="序号" width="40" />
                <el-table-column fixed prop="name" label="图片" width="115">
                  <template #default="scope">
                    <div class="img">
                      <img :src="scope.row.mainPicUrl" alt="" />
                      <img class="icon" v-if="scope.row.replenishType === 1" :src="huan" alt="" />
                      <img class="icon" v-if="scope.row.replenishType === 2" :src="bu" alt="" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" width="180" />
                <el-table-column prop="brandName" label="品牌" width="100" />
                <el-table-column prop="modeCode" label="型号" width="100" />
                <el-table-column prop="productUnit" label="单位" width="100">
                  <template #default="scope">
                    {{ useCodeArrStore().getDictName("shop_unit", scope.row.productUnit) }}
                  </template>
                </el-table-column>

                <!-- 有空间的时候-来自快照 -->
                <template v-if="optionInfo.isSpace">
                  <el-table-column prop="num" label="数量" width="100" />
                  <el-table-column prop="actualUsedNum" label="实际退/换/补数量" width="180" />
                  <el-table-column prop="lostRate" label="耗损率" width="100" />
                  <el-table-column prop="costUnitPrice" label="成本单价" width="100" />
                  <el-table-column prop="productUnitPrice" label="材料单价" width="100" />
                  <el-table-column prop="workerUnitPrice" label="人工费单价" width="100" />
                  <el-table-column prop="unitTotalMoney" label="单项合计" width="100" />
                  <el-table-column prop="projectVal" label="预算工程量" width="140" />
                  <el-table-column prop="projectTotalMoney" label="汇总合计" width="100" />
                  <el-table-column prop="quotaName" label="工程项目名称" width="260" />
                  <el-table-column prop="standardDesc" label="材料及工艺说明" width="140">
                    <template #default="{ row }">
                      <p class="text-over8" style="width: 100%" :title="row.standardDesc">
                        {{ row.standardDesc }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="exchangeAmount" label="变更金额" width="280" />
                  <el-table-column prop="exchangeCause" label="变更原因" width="280" />
                </template>

                <!-- 没有空间的时候-来自核量列表页 -->
                <template v-else>
                  <el-table-column prop="increaseNum" label="换补数量" width="100" />
                  <el-table-column prop="lostRate" label="耗损率" width="100" />
                  <el-table-column prop="productUnitPrice" label="材料单价" width="100" />
                  <el-table-column prop="workerUnitPrice" label="人工费单价" width="100" />
                  <el-table-column prop="unitTotalMoney" label="单项合计" width="100" />
                  <el-table-column prop="projectVal" label="预算工程量" width="140" />
                  <el-table-column prop="projectTotalMoney" label="汇总合计" width="100" />
                  <el-table-column prop="exchangeAmount" label="变更金额" width="280" />
                  <el-table-column prop="exchangeCause" label="变更原因" width="280" />
                </template>
              </el-table>
              <!-- 底部的备注说明 -->
              <div class="tips mt14 mb14" v-if="optionInfo.isSpace">
                <span class="label">备注说明</span>
                <!-- <el-input v-model="currSpace.remark" disabled style="width: 100%" :rows="2" type="textarea" placeholder="" /> -->
                <RemarkEditor v-model="currSpace.remark" :isEdit="false" />
              </div>
            </template>

            <el-empty v-else description="这里暂时什么都没有" />
          </div>
        </div>
      </template>
      <!-- <template #footer>
        <div style="flex: auto">
          <el-button type="info" @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="cancelClick"> 知道了 </el-button>
        </div>
      </template> -->
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
import {
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
import { Search, QuestionFilled } from "@element-plus/icons-vue";
import tui from "@/assets/images/quantity/tui.png";
import huan from "@/assets/images/quantity/huan.png";
import bu from "@/assets/images/quantity/bu.png";
import useCodeArrStore from "@/store/modules/select";
import RemarkEditor from "@/components/RemarkEditor";

const emit = defineEmits(["update:isOpen", "submitOk"]);
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  optionInfo: {
    type: Object,
    default: () => {
      return {
        title: "变更合同ID",
        returnOrderObj: [], //退货单
        replaceOrderObj: [], //换补单
        spaceDetail: {}, //空间详情数据 obj
        spaceArr: [], //空间列表数据
        isSpace: false //是否有空间
      };
    }
  }
});
const activeName = ref(null);
const textarea = ref("");
const _spaceDetail = ref({});
const _spaceArr = ref([]);
const _productItemList = ref([]);
const _returnOrderObj = ref({});
const _replaceOrderObj = ref([]);
const currSpace = ref({});
const loading = ref(false);

const _isOpen = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

watch(
    () => props.optionInfo,
    val => {
      if (val?.spaceArr) {
        console.log("1111111111传递过来的数据===", val);
        _spaceArr.value = [...val.spaceArr];
        _spaceDetail.value = { ...val.spaceDetail };
        activeName.value = val?.spaceArr[0]?.spaceId;
        getSpaceData(activeName.value);
      } else {
        _returnOrderObj.value = val?.returnOrderObj ? JSON.parse(JSON.stringify(val?.returnOrderObj)) : {};
        _replaceOrderObj.value = val?.replaceOrderObj ? JSON.parse(JSON.stringify(val?.replaceOrderObj)) : {};
        console.log("22222222传递过来的数据===", val);
      }
    },
    { deep: true }
);

onMounted(() => {});

let contentIdList = [];
const tableArraySpan = (table, nouse, { row, rowIndex, columnIndex }) => {
  let span;
  if (!table) return;

  let arr = [11, 12, 13];
  if (props.optionInfo.isSpace) {
    arr = [14, 15, 16, 17];
  }

  if (arr.indexOf(columnIndex) > -1) {
    if (!row.contentId) return;
    if (contentIdList[columnIndex] === row.contentId) span = [0, 1];
    else {
      contentIdList[columnIndex] = row.contentId;
      const rows = table.filter(item => {
        return item.contentId === contentIdList[columnIndex];
      });
      const count = rows.length;
      if (count > 1) {
        span = [count, 1];
      }
    }

    if (rowIndex === table.length - 1) contentIdList[columnIndex] = null;

    return span;
  }
};

const setLoading = flag => {
  loading.value = flag;
};

const handleClickTabs = (tab, e) => {
  console.log(333333333, tab);
  getSpaceData(activeName.value);
};

const getSpaceData = spaceId => {
  const obj = _spaceArr.value.find(item => item.spaceId === spaceId);
  if (obj) {
    currSpace.value = obj;
    _productItemList.value = obj?.productItemList?.length > 0 ? JSON.parse(JSON.stringify(obj?.productItemList)) : [];
    _returnOrderObj.value = obj?.returnOrderDetailVO ? JSON.parse(JSON.stringify(obj?.returnOrderDetailVO)) : {};
    _replaceOrderObj.value = obj?.replacementOrderDetailVO ? JSON.parse(JSON.stringify(obj?.replacementOrderDetailVO)) : {};
    console.log("找到了对应空间的详情数据===", obj);
  }
};

const reset = () => {
  activeName.value = null;
  _spaceDetail.value = {};
  _spaceArr.value = [];
  _productItemList.value = [];
  _returnOrderObj.value = {};
  _replaceOrderObj.value = [];
  currSpace.value = {};
};

const cancelClick = () => {
  reset();
  _isOpen.value = false;
  // emit("changeAttr");
};
const confirmClick = () => {};

defineExpose({ setLoading });
</script>

<style lang="scss">
.change-order-drawer {
  .el-drawer {
    box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
    border-radius: 10px 0px 0px 10px;
  }
  .el-drawer__header {
    font-size: 18px;
    color: #131414;
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #dcdfe6;
    h4 {
      font-weight: normal;
      position: relative;
      .icon {
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #409eff;
        border-radius: 50%;
        margin-right: 10px;
        margin-bottom: 4px;
      }
    }
  }
  .el-drawer__body {
    padding: 0 !important;
  }
  .el-drawer__footer {
    display: flex;
    justify-content: flex-end;
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    padding: 14px 20px;
    .el-button--primary {
      border: none;
    }
    .el-button.el-button--info {
      --el-color-info: #f2f3f5;
      --el-color-white: #1d2129;
      &:hover {
        --el-button-hover-bg-color: #f2f3f5 !important;
        border-color: #f2f3f5 !important;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.text-over8 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 8; //控制在3行显示
  -webkit-box-orient: vertical;
}
.tips {
  display: flex;
  :deep(.el-textarea.is-disabled) {
    .el-textarea__inner {
      background-color: white !important;
    }
  }
  span.label {
    width: 70px;
  }
}
.table-item {
  padding: 20px;
  :deep(.el-table__cell) {
    position: relative;
  }
  :deep(.cell) {
    overflow: visible;
    .img {
      .icon {
        position: absolute;
        width: 28px;
        height: auto;
        left: 0px;
        top: 0px;
      }
    }
  }
  img {
    width: 80px;
    border-radius: 4px;
  }
}
.el-button--primary.is-link.underline {
  border-radius: 0;
  border-bottom: 1px solid #213270;
}
.top {
  padding: 20px;
  .total-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .left {
      font-size: 16px;
      color: #606266;
      i {
        font-style: normal;
      }
    }
    .right {
      display: flex;
      justify-content: space-between;
    }
  }
  .price-wrap {
    padding: 14px 20px;
    background-color: #f6f8fa;
    margin-top: 10px;
    border-radius: 4px;
    p {
      color: #606266;
    }
    span {
      color: #86909c;
    }
  }
}
:deep(.el-tabs__nav-scroll) {
  padding-left: 20px;
}
</style>
